<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="pageInfo.records"
      element-loading-text="加载中......"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item label="IP地址">
              <span>{{ props.row.ip }}</span>
            </el-form-item>
            <el-form-item label="位置信息">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="请求URL">
              <span>{{ props.row.url }}</span>
            </el-form-item>
            <el-form-item label="执行方法">
              <span>{{ props.row.requestMethod }}</span>
            </el-form-item>
            <el-form-item label="方法参数">
              <span>{{ props.row.requestParameters }}</span>
            </el-form-item>
            <el-form-item label="方法返回值">
              <span>{{ props.row.result }}</span>
            </el-form-item>
            <el-form-item label="浏览器标识">
              <span>{{ props.row.userAgent }}</span>
            </el-form-item>
            <el-form-item label="浏览器信息">
              <span>{{ props.row.browserInfo }}</span>
            </el-form-item>
            <el-form-item label="异常信息">
              <span>{{ props.row.exception }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="IP地址" prop="ip" width="130" />
      <el-table-column label="位置信息" prop="address" />
      <el-table-column label="请求URL" prop="url" />
      <el-table-column label="请求方法" prop="requestMethod" width="60" />
      <el-table-column label="业务类型" width="80">
        <template slot-scope="scope"
          ><el-tag size="mini" effect="plain">{{
            scope.row.businessType
          }}</el-tag></template
        >
      </el-table-column>
      <el-table-column label="执行方法">
        <template slot-scope="scope">
          {{ scope.row.classMethod | getShortMethodName }}
        </template>
      </el-table-column>
      <el-table-column label="浏览器信息">
        <template slot-scope="scope">
          {{
            scope.row.browserInfo.platform +
            " | " +
            scope.row.browserInfo.browser
          }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope"
          ><i class="el-icon-time" /> {{ scope.row.createTime }}</template
        >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :hide-on-single-page="true"
      :current-page="pageInfo.current"
      :page-size="pageInfo.size"
      layout="total, prev, pager, next, jumper"
      :total="pageInfo.total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getRequestLogListApi } from "@/api/log";

export default {
  data() {
    return {
      pageInfo: { size: 10, current: 1, total: 0, records: [] },
      listLoading: true,
    };
  },
  created() {
    this.fetchData();
  },
  filters: {
    getShortMethodName(_data) {
      const arr = _data.split(".");
      const n = arr.length;
      return arr[n - 2] + "." + arr[n - 1];
    },
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getRequestLogListApi({
        page: this.pageInfo.current,
        limit: this.pageInfo.size,
      }).then((response) => {
        this.pageInfo = response.data;
        this.listLoading = false;
      });
    },
    handleCurrentChange(page) {
      this.pageInfo.current = page;
      this.fetchData();
    },
  },
};
</script>
